<template>
  <div class="channelList">
    <!-- 我的频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="show = !show" plain type="danger" size="small">{{
          show ? "取消" : "编辑"
        }}</van-button>
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownList" :key="index">
          <span @click="activeBtn(index)" :class="{ active: index == value }">{{
            item.name
          }}</span>
          <van-icon
            @click="delChannel(index)"
            v-show="show && index != 0"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 可选频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in optChannel"
          :key="item.id"
          @click="addChannel(item)"
        >
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { setChannelAPI } from "@/api";
import { saveChannel } from "@/utils/channel";

export default {
  props: {
    // 接受父组件传来的自己有的频道
    ownList: {
      //   限制必填和类型为数组
      require: true,
      type: Array,
    },

    // 父组件传来的所有频道
    allChannel: {
      require: true,
      type: Array,
    },

    // 父组件传来的active
    value: {
      require: true,
      type: Number,
    },
  },

  // 在组件内部写一个属性叫model属性
  // 就是在告诉外界调用我这个组件时，如果用v-model该怎么生成代码
  // 用prop告诉外界应该生成什么样的父传子，用event告诉外界应该生成什么样的子传父
  // 它是在告诉编译器，到时候你帮我生成事件的时候，原本你是该生成@input的，但是不要了
  // 你给我生成 @changeActive,同样也告诉了编译器，你帮我生成父传子属性时候，原本该生成的
  // 是 :value="数据" ，但不要了，帮我改成 :idx="数据"
  // model: {
  //   prop: "idx",
  //   event: "changeActive",
  // },

  data() {
    return {
      show: false,
      ArrList: [],
    };
  },
  methods: {
    activeBtn(index) {
      // 把下标传到父组件去,父组件接受数据是$event,在vue时里$event是接受数据的意思
      this.$emit("input", index);
      // 通知父组件去关闭
      this.$emit("close");
    },

    // 封装重置频道,判断是否登录,登录了就发请求,没登录就保存到本地存储
    async setChannel() {
      // 判断有没有登录
      if (this.$store.state.tokenObj.token) {
        // 代表登录了,就发请求
        // 此时我们是想保存最新的'我的频道',换句话就是保存ownLIST
        // 但是这个数组不能直接传递给服务器,因为服务器要的格式不一样,是id和name,要传id和seq
        // 所以就应该要按照onwList做一个提取新数组
        this.ArrList = this.ownList.map((val, index) => {
          return { id: val.id, seq: index + 1 };
        });
        // 登录了
        let res = await setChannelAPI({
          channels: this.ArrList,
        });
        // console.log(res);
      } else {
        // 没登录保存到本地存储
        saveChannel(this.ownList);
      }
    },

    // 添加频道
    addChannel(item) {
      // 把被点的频道加到我的频道里
      this.ownList.push(item);
      // 调用方法
      this.setChannel();
    },

    // 删除频道
    async delChannel(index) {
      this.ownList.splice(index, 1);
      // 调用方法
      this.setChannel();
    },
  },

  computed: {
    // 可选频道
    optChannel() {
      // 过滤所有频道
      return this.allChannel.filter((v) => {
        // 判断我的频道在不在里面
        let idx = this.ownList.findIndex((val) => {
          return v.id == val.id;
        });
        return idx == -1;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.channelList {
  padding: 0 20px;
  .channel-wrap {
    .title {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    ::v-deep .van-grid-item__text {
      font-size: 14px;
      color: #000;
    }
    .van-grid {
      position: relative;
      .active {
        color: red;
      }
      .van-icon {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 12px;
      }
    }
  }
}
</style>